<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bootstrap4网格布局</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="list">内容</div>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-6">
                        <div class="list">内容</div>
                    </div>
                    <div class="col-6">
                        <div class="list">内容</div>
                    </div>
                    <div class="col-6">
                        <div class="list">内容</div>
                    </div>
                    <div class="col-6">
                        <div class="list">内容</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="list">内容</div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>代表指定意义的文本颜色</h2>
        <p class="text-muted">柔和的文本。</p>
        <p class="text-primary">重要的文本。</p>
        <p class="text-success">执行成功的文本。</p>
        <p class="text-info">代表一些提示信息的文本。</p>
        <p class="text-warning">警告文本。</p>
        <p class="text-danger">危险操作文本。</p>
        <p class="text-secondary">副标题。</p>
        <p class="text-dark">深灰色文字。</p>
        <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
        <p class="text-white">白色文本（白色背景上看不清楚）。</p>

        <button type="button" class="btn">基本按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-dark">黑色</button>
        <button type="button" class="btn btn-light">浅色</button>
        <button type="button" class="btn btn-link">链接</button>
    </div>
    <div class="container">
        <div class="progress">
            <div class="progress-bar" style="width:70%"></div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-striped" style="width:80%"></div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 60%"></div>
        </div>

        <div class="progress">
            <div class="progress-bar bg-danger" style="width:30%">
                Free Space
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-success" style="width:40%">
                Free Space
            </div>
            <div class="progress-bar bg-warning" style="width:10%">
                Warning
            </div>
            <div class="progress-bar bg-danger" style="width:20%">
                Danger
            </div>
        </div>
    </div>

</body>
</html>